<template>
  <!--排行榜-->
  <div class="topList" id="app2">
    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="(item, index) in banners" :key="index">
        <img :src="item.imageUrl" alt="" />
      </el-carousel-item>
    </el-carousel>

    <div class="topList-content">
      <div class="topList-head">推荐歌单</div>
      <ul class="topList-item">
        <li
          class="topList-img"
          v-for="(item, index) in list"
          :key="index"
          @click="toPlaylist(item.id)"
        >
          <img :src="item.picUrl" alt="" class="image" />
          <div class="wen">{{ item.name }}</div>
        </li>
        <!-- <h3 class="name">11</h3> -->
      </ul>
      <div class="topList-head1">最新歌曲</div>
      <ul class="song-item">
        <li
          v-for="(item, index) in songList"
          :key="index"
          @dblclick="playMusic(item.id)"
        >
          <img :src="item.picUrl" alt="" class="song-img" />
          <p class="song">{{ item.name }}</p>
          <p class="author">{{ item.song.artists[0].name }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  methods: {
    toPlaylist(id) {
      this.$router.push("/playlists?q=" + id);
    },
    playMusic(id) {
      axios({
        url: "http://music.eleuu.com/song/url",
        method: "get",
        params: {
          id,
        },
      }).then((res) => {
        if (res.data.data[0].url != null) {
          this.$parent.$parent.$children[3].playmusic(id);
        } else {
          alert("不能播放该歌曲");
        }
      });
    },
  },
  created() {
    axios({
      url: "http://music.eleuu.com/banner",
      method: "get",
    }).then((res) => {
      console.log(res);
      this.banners = res.data.banners;
    }),
      axios({
        url: "http://music.eleuu.com/personalized",
        method: "get",
        params: {
          limit: 15,
        },
      }).then((res) => {
        this.list = res.data.result;
      }),
      axios({
        url: "http://music.eleuu.com/personalized/newsong",
        method: "get",
        params: {
          limit: 9,
        },
      }).then((res) => {
        console.log(res);
        this.songList = res.data.result;
      });
  },
  data() {
    return {
      banners: [],
      list: [],
      songList: [],
    };
  },
};
</script>
<style scoped>
.topList {
  /* border: white 1px solid; */
  position: absolute;
  top: -2%;
  left: 4%;
  width: 1060px;
  height: 100%;
  color: rgb(255, 255, 255, 0.6);
}

ul {
  list-style: none;
}

.topList-head {
  color: white;
  font-size: 20px;
  position: absolute;
  left: 2%;
  top: 0%;
}

.topList-head1 {
  color: white;
  font-size: 20px;
  position: absolute;
  left: 2%;
  top: 270%;
}

.topList-content {
  position: absolute;
  top: 48%;
  left: 0%;
  height: 50%;
  overflow: hidden;
  width: 1060px;
  overflow-y: scroll;
  /* border: 1px solid white; */
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.3);
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgb(255, 255, 255, 0.7);
}

.image {
  width: 130px;
}

.topList-img {
  width: 150px;
  height: 125px;
  margin: 40px 20px;
  float: left;
}

.topList-img1 {
  width: 150px;
  height: 125px;
  margin: 40px 20px;
  float: left;
  position: relative;
  top: 70px;
}

img {
  width: 100%;
  height: 100%;
}

.wen {
  font-size: 14px;
}

.song-item {
  position: absolute;
  left: 0%;
  top: 280%;
}

.song-item li {
  width: 400px;
  height: 150px;
  float: left;
  margin: 5px 30px;
  position: relative;
  left: 0px;
  overflow: hidden;
}

.song-img {
  position: absolute;
  left: 0px;
  width: 120px;
  height: 120px;
}

.song {
  position: absolute;
  left: 160px;
  top: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.author {
  position: absolute;
  left: 160px;
  top: 60px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
</style>
